<script setup lang="ts">
import { ref } from "vue";
interface Props {
  title?: string;
  content?: string;
  showCancelBtn?: boolean;
  comfirm?: () => void;
  cancel?: () => void;
}
const props = withDefaults(defineProps<Props>(), {
  title: "提示",
  content: "内容",
  showCancelBtn: true,
  comfirm: () => {},
  cancel: () => {}
});
</script>

<template>
  <div
    w:w="screen"
    w:h="screen"
    w:pos="absolute top-0 left-0"
    w:bg="black opacity-50"
    w:flex="~ nowrap"
    w:align="items-center"
    w:justify="center"
  >
    <div w:bg="white" w:border="rounded-4xl" w:w="160">
      <div w:text="center" w:m="t-8" w:font="bold">
        {{ props.title }}
      </div>
      <div w:m="x-8 y-8">
        {{ props.content }}
      </div>
      <div
        w:flex="~ nowrap"
        w:align="items-stretch"
        w:justify="around"
        w:border="t-2 solid gray"
      >
        <div
          v-if="props.showCancelBtn"
          w:flex="1"
          w:text="center"
          w:p="y-8"
          w:font="bold"
          w:border="r-2 solid gray"
          @click="props.cancel"
        >
          取消
        </div>
        <div
          w:flex="1"
          w:text="center blue-500"
          w:p="y-8"
          w:font="bold"
          @click="props.comfirm"
        >
          确认
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss"></style>
